<template>
    <div class="page" data-page="mine" style="z-index: 2;">
        <div class="navbar">
            <div class="navbar-inner sliding">
                <div class="left" @click=$root.backToTab()>
                    <a class="link">
                        <i class="icon icon-back"></i>
                        <span class="ios-only">Back</span>
                    </a>
                </div>
                <div class="title">单位详情</div>
            </div>
        </div>

        <div class="page-content unitInfo-page-content">
            <div class="list simple-list no-hairlines" style="margin: 0px 0px;width: 100%;height: 145px">
                <ul>
                    <li style="height: 70px">

                       <div style="padding-top: 15px;padding-left: 9px;"><img src="" class="myicon" id="icon"></div>
                       <div style="width:80%;height: 70px;" id="text">
                            <div style="float: left;width: 95%;font-size: 16px;padding-top: 17px; color: #212121;" class="text" id="name"></div>
                            <div class="text" id="address" style="font-size: 12px;padding-top: 6px;"></div>
                       </div>
                    </li>

                    <div class="line-split" style="background-color: rgba(234, 240, 243, 0.5);height: 1px"></div>

                    <div class="row" style="height: 74px;padding-left: 0px;padding-right: 0px" >
                       <div class="col my_col" @click="unit_zbb"><img class="my_image" src="{{staticPath}}img/mine/unit_zbb.png" ><div class="text_div">值班表</div></div>
                       <div class="col my_col" @click="unit_vr"><img class="unit_vr" src="{{staticPath}}img/mine/unit_vr.png" ><div class="text_div">VR</div></div>
                       <div class="col my_col" @click="unit_fct"><img class="unit_fct" src="{{staticPath}}img/mine/unit_layer.png" ><div class="text_div">分层图</div></div>
                        <div class="col my_col" @click="unit_3D"><img class="unit_fct" src="{{staticPath}}img/mine/unit_3D.png" ><div class="text_div">三维图</div></div>
                     </div>

                </ul>
            </div>

            <div class="div_line" style="background-color: rgba(234, 240, 243, 0.5);height: 10px"></div>

            <div class="list simple-list no-hairlines " style="margin: 0px 0px;width: 100%">
                <ul>
                    <li class="item-content">
                        <div class="item-inner my_inner" style="-webkit-box-align: center;align-items: center;">
                            <div class="item-title" style="font-size: 15px;padding-left: 10px;border-left: 2px solid #378bf6;">
                                基本信息
                            </div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title my_title">
                                单位类别
                            </div>
                            <div class="item-title" style="font-size: 14px" id="msg-1">
                            </div>
                        </div>
                    </li>

                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title my_title">
                                所属消防队
                            </div>
                            <div class="item-title" style="font-size: 14px" id="msg-2">

                            </div>
                        </div>
                    </li>

                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title my_title">
                                所属消防队电话
                            </div>
                            <div class="item-title" style="font-size: 14px" id="msg-3">

                            </div>
                        </div>
                    </li>

                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title my_title">
                                单位占地面积
                            </div>
                            <div class="item-title" style="font-size: 14px" id="msg-4">

                            </div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title my_title">
                                防火等级
                            </div>
                            <div class="item-title" style="font-size: 14px" id="msg-5">

                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="div_line" style="background-color: rgba(230, 230, 230, 0.5);height: 10px"></div>

            <div class="list no-hairlines" style="margin: 0px 0px;width: 100%">
                <ul id="people">
                    <li class="item-content">
                        <div class="item-inner my_inner">
                            <div class="item-title" style="font-size: 15px;padding-left: 10px;border-left: 2px solid #378bf6;">
                                相关人员
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
    </div>
    </div>
</template>
<script>
    return {
        data: function () {
            return {
                id: this.$route.params.id,
                vrUrl:'',
            }
        },
        // Component Methods
        methods: {
            getUnitInfo: function () {
                var self = this;
                common.loading(1);
                Dao.unitInfo({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    organizationId: this.$route.params.id
                    }, function (data) {
                        common.loading(0);
                        self.vrUrl = encodeURIComponent(data.vrUrl);
                        $("#icon").attr("src", common.transNullundefined(data.logoUrl));
                        $("#name").append(common.transNullundefinedToline(data.name));
                        $("#address").append(common.transNullundefinedToline(data.address));

                        $("#msg-1").append(common.transNullundefinedToline(data.userClassesName));
                        $("#msg-2").append(common.transNullundefinedToline(data.belongsFireBrigade));

                        $("#msg-3").append(`<a href="tel:`+common.transNullundefinedToline(data.belongsFireBrigadeMobile)+`" ontouchstart = "return false;" onclick="window.location='tel:`+common.transNullundefinedToline(data.belongsFireBrigadeMobile)+`'">`+common.transNullundefinedToline(data.belongsFireBrigadeMobile)+`</a>`);

                        if (data.floorSpace&&data.floorSpace!="") {
                            $("#msg-4").append(common.transNullundefinedToline(data.floorSpace) + '㎡');
                        } else {
                            $("#msg-4").append(common.transNullundefinedToline(data.floorSpace));
                        }
                        $("#msg-5").append(common.transNullundefinedToline(data.fireRatingName));

                        if (data.contacts&&data.contacts.length>0){
                            for (var i = 0; i < data.contacts.length; i++) {
                                var bean = data.contacts[i];
                                $("#people").append(`<li>
                                                       <div class="item-content" style="padding-left:36px;padding-right: 32px;">
                                                            <div class="dutyState-img">
                                                                <img src="`+staticPath+`img/mine/defaulticon.png">
                                                            </div>
                                                           <div class="item-title" style="font-size: 14px;margin-left: 8px;">`+common.transNullundefinedToline(bean.name)+`</div>
                                                           <div class="item-after">`+ common.transNullundefinedToline(bean.roleName)+`</div>
                                                         </div>
                                                       </div>
                                                     </li>`);
                            }
                        }
                },function(e) {
                   common.loading(0);
                   app.methods.showToastBottom("获取单位信息失败");
                } ,false);
            },
            
            unit_zbb:function() {
                app.router.navigate("/dutyRoster/"+this.id +"/");
            },
            unit_vr:function() {
                if(this.vrUrl){
                    app.router.navigate("/unitVRview/"+this.vrUrl+"/");
                }else{
                    app.methods.showToastBottom("该单位暂无VR！");
                }
            },
            unit_fct:function() {
               app.router.navigate("/layer2D/"+this.id +"/5/");
            },
            unit_3D:function() {
               app.router.navigate("/layer3D/"+this.id +"/");
            },
        },
        on: {
            pageInit: function (e, page) {
                var self = this;
                self.getUnitInfo();
            },
        },
    }
</script>

<style scoped>
    .myrow {
        margin-left: 25px;
        margin-right: 25px;
    }

    .title {
        padding-right: 56px;
        margin: 0px auto;
    }

    .myicon {
        width: 60px;
        height: 60px;
    }

    .my_title{
        font-size: 14px;
        color: #666666;
    }
    .my_inner{
        padding-top: 0px;
        padding-bottom: 0px;
    }
    .text {
        line-height: 14px;
        width: 95%;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .myicon {
        width: 39px;
        height: 39px;
    }

    .simple-list li:after{
        left: 0px;
    }
    .my_col{
        height: 74px;
        text-align: center;
        padding-top: 16px;
    }
    .text_div{
        font-size: 11px;
        color: #666666;
        margin-top: -3px;
    }
    .simple-list li:after{
        height: 0px;
    }
    .list .item-inner:after{
        height: 0px;
    }
    .dutyState-img{
        width: 40px;
        height: 40px;
        border-radius: 100%;
        -webkit-border-radius: 100%;
        overflow: hidden;
    }
    .dutyState-img img{
        width: 100%;
        height: 100%;
    }


</style>